<template>
	<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#0041a5" @clickItem="onTabsClick" />
	<view v-for="(i,key) in tabs">
		<uni-search-bar v-if="key == current" :key="i" radius="5" focus :placeholder="`请输入搜索关键词${i}`" v-model="searchValue" cancelButton="none" @confirm="searchConfirm"></uni-search-bar>
	</view>
	<view class="page page-search">
		<view v-if="historySearchList.length">
			<view class="flex" justify-between items-center>
				<view text-base>历史搜索</view>
				<view flex items-center @click="clearAll">
					<uni-icons type="trash" size="18"> </uni-icons> <view m-l-6px>清空</view>
				</view>
			</view>
			<button size="mini" class="tag" v-for="item in historySearchList" :key="item" @click="doSearch(item)">{{item}}</button>
		</view>
		
		<view v-if="hotSearchList.length">
			<view mt-20px text-base>热门搜索 <uni-icons type="fire-filled" color="red-5" size="16"></uni-icons> </view>
			<button size="mini" class="tag" v-for="(item,key) in hotSearchList" :key="item" @click="doSearch(item.name)">
				<text mr-3px>{{item.name}}</text> 
				<nut-tag v-if="item.num >= 4" style="line-height: 1.5;" custom-color="red">热</nut-tag>
			</button>
		</view>
		
	</view>
</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'

	const {tabIndex} = defineProps({
		tabIndex: {
			type: [String, Number],
			default: 0
		}
	})
	const current = ref(Number(tabIndex))
	const tabs = ['搜产品','搜企业','搜供应','搜求购']
	const onTabsClick = ({currentIndex}) => {
		if (current.value !== currentIndex) {
			current.value = currentIndex
		}
	}

	
	const searchValue = ref('')
	const searchConfirm = () => {
		console.log('---value---',searchValue.value);
		if(!searchValue.value) return
		let isExist = historySearchList.value.includes(searchValue.value)
		if(!isExist) {
			historySearchList.value = [...historySearchList.value,searchValue.value]
			uni.setStorageSync('historySearchList',historySearchList.value)
		}
		// do request 
		doSearch(searchValue.value)
	}


	const historySearchList = ref([])
	historySearchList.value = uni.getStorageSync('historySearchList') || []
	const clearAll = () => {
		historySearchList.value = []
		uni.setStorageSync('historySearchList',[])
	}

	const hotSearchList = ref([])
	async function getHotList() {
		hotSearchList.value = await api.getHotKeywords()
	}
	getHotList()

	const doSearch = keyword => {
		const globalData = getApp().globalData
		globalData.tabarQuery = { keyword }
		let url = ''
		switch (current.value) {
			case 0: 
				url = '/pages/product/index'
			break
				case 1: 
				url = '/pages/enterprise/index'
			break
				case 2: 
				url = '/pages/demand/index'
				globalData.tabarQuery.type = 'supply'
			break
				case 3: 
				url = '/pages/demand/index'
				globalData.tabarQuery.type = 'require'
		}
		console.log('---globalData.tabarQuery---',globalData.tabarQuery);
		if(current.value) {
			uni.switchTab({url})
		}else {
			uni.navigateTo({
				url: url + '?keyword=' + keyword
			})
		}
	}

</script>

<style lang="scss">
.uni-searchbar {
	background-color: white;
}

:root,page {
	--nut-tag-font-size: 9px;
	--nut-tag-padding: 0 3px;
}
.page-search {
	padding: 10px;

	.tag {
		color: #666;
		background-color:#f1f1f1;
		border-color:#fff;
		margin-top: 10px;
		margin-right: 10px;
		line-height: 1.5;
		padding: 0.4rem 1rem;
		display: inline-flex;
		align-items: center;
		&::after {
			border: none;
		}
	}
}
	
</style>

